<script lang="ts" setup>
import { ref } from "vue";
import psd from "./psd.vue";
import psdCopy from "./psd copy.vue";
import psdCopy2 from "./psd copy 2.vue";
import Car from './car.vue'
import Line from '../shuttlebus/line.vue'

const carTab = [
  {
    name: "待分配",
    content: psd,
  },
  {
    name: "已分配",
    content: psdCopy,
  },
  {
    name: "已完成",
    content: psdCopy2,
  },
  // {
  //   name: "在线人员",
  //   content: Line,
  // },
  {
    name: "车辆人员分配",
    content: Car,
  },
];
const activeName = ref("车辆人员分配");
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(item, index) in carTab"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
          <component
            :is="item.content"
            v-if="activeName === item.name"
            class="table-border"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
